<template>
  <div slot>


    <v-data-table
      :headers="headers"
      :items="meals"
      hide-actions
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.id }}</td>
        <td>{{ props.item.company_name }}</td>
        <td>{{ props.item.goods_name }}</td>
        <td>{{ props.item.username }}</td>
        <td>{{ props.item.number }}</td>
        <td>{{ props.item.action }}</td>
        <td>{{ props.item.intime }}</td>
        <td>
          <v-btn-toggle>
            <v-btn flat small color="primary" @click="showDetail(props.item.id)">详情</v-btn>
            <v-btn flat small color="primary" @click="edit(props.item.id)">修改</v-btn>
            <v-btn flat small color="error" @click="del(props.item.id)">删除</v-btn>
          </v-btn-toggle>
        </td>
      </template>
    </v-data-table>
    <v-pagination
      v-model="page"
      :length="countPage"
    ></v-pagination>
    <v-dialog
      v-model="dialog"
      width="500"
    >
      <v-card>
        <v-card-title
          class="headline grey lighten-2"
          primary-title
        >
          {company.company_name}
        </v-card-title>

        <v-card-text>
          <p>v-card-text</p>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="dialog = false"
          >
            关闭
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog
      v-model="dialog"
      width="500"
    >
      <v-card>
        <v-card-title
          class="headline grey lighten-2"
          primary-title
        >
          {{meal.goods_name}}
        </v-card-title>

        <v-card-text>
          <p>时间：{{meal.intime}}</p>
          <p>食品名称：{{meal.goods_name}}</p>
          <p>类型：{{meal.action}}</p>
          <p>生产日期：{{meal.made_date}}</p>
          <p>数量：{{meal.number}}</p>
          <p>批次：{{meal.pici}}</p>
          <p>仓管姓名：{{meal.username}}</p>
          <p>备注：{{meal.remark}}</p>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>

          <v-btn
            color="primary"
            flat
            @click="dialog = false"
          >
            关闭
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
  export default {
    name: "MealShow",
    data() {
      return {
        meals: [],
        meal: {},
        countPage: 1,
        page: 1,
        dialog: false,
        headers: [
          {text: 'Id', value: 'id'},
          {text: '公司名称', value: 'company_name'},
          {text: '食品名称', value: 'goods_name'},
          {text: '仓管姓名', value: 'goods_name'},
          {text: '数量', value: 'goods_name'},
          {text: '类型', value: 'mobile'},
          {text: '时间', value: 'intime'},
          {text: '操作', value: ''},
        ],
      }

    },
    methods: {
      showMeal() {
        let this_ = this
        this.axios.get('/index/meal/show/page/' + this.page).then(function (res) {

          this_.meals = res.data.data.meals
          this_.countPage = res.data.data.countPage
          this_.page = parseInt(res.data.data.page)
        })
      },
      showDetail(id) {
        let this_ = this
        this.axios.post('/index/meal/detail', {id: id}).then(function (res) {
          this_.meal = res.data.data
          this_.dialog = true
        })
      },
      del(id) {
        let this_ = this
        this.axios.post('/index/meal/del', {meal_id: id}).then(function (res) {
          this_.showMeal()
          alert('删除成功')
        })
      },
      edit(id){
        this.$router.push('/meal/edit/'+id)
      },

    }
    ,
    mounted() {
      this.showMeal()
    }
    ,
    watch: {
      page(newV, oldV) {
        console.log(this.page)

        this.showMeal()

      }
    }
  }
</script>

<style scoped>

</style>
